//这是一个仪表盘组件，用于显示系统的总体概况和统计数据。
<template>
    <el-card class="box-card" shadow="hover" >
        <div slot="header" class="cardhead" >
          <h3>主页面</h3>
          <el-button style="float: right; padding: 3px 0" type="text">员工守则</el-button>
        </div>
        <div class="icon">
            <div class="cardmain">
                <router-link to="site-management/site-reservation">
                    <img src="../assets/imgicon/首页.png" alt="场地预约">
                    <p>场地预约</p>
                </router-link>
            </div>
            <div class="cardmain">
                <router-link to="financial-management/financial-reports">
                    <img src="../assets/imgicon/金额.png" alt="财政">
                    <p>财政</p>
                </router-link>
            </div>
            <div class="cardmain">
                <router-link to="personnel-management/information-management">
                    <img src="../assets/imgicon/用户2.png" alt="员工信息">
                    <p>员工信息</p>
                </router-link>
            </div>
            <div class="cardmain">
                <router-link to="funeral-management/evaluation-management">
                    <img src="../assets/imgicon/数据监测.png" alt="用户评价检测">
                    <p>用户评价检测</p>
                </router-link>
            </div>
            <div class="cardmain">
                <router-link to="funeral-management/package-configuration">
                    <img src="../assets/imgicon/文件2.png" alt="套餐管理">
                    <p>套餐管理</p>
                </router-link>
            </div>
            <div class="cardmain">
                <router-link to="reservation-management/timetable-display">
                    <img src="../assets/imgicon/档案.png" alt="预约时间表">
                    <p>预约时间表</p>
                </router-link>
            </div>
        </div>
        <div class="Mainpto">
            <!-- 柱状图 -->
            <EchartHistogram />
        </div>
      </el-card>
</template>

<script>
import EchartHistogram from './Finance/EchartHistogram.vue';
export default {
        data(){
            return{

            }
        },components:{
            EchartHistogram
        },
    }
</script>
<style lang="less" scoped>
.box-card{
    height: 99.5%;
    display: flex;
    flex-direction: column;
}
.icon{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: space-between;
}
.cardmain{
    width: 10vw;
    padding: 1%;
    border: 2px #5a5a5a solid;
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* 过渡效果 */
}
.cardmain>a{
    text-decoration: none; /* 去除下划线 */
}
.cardmain:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    transform: scale(1.05); /* 放大 5% */
    
  }

.cardmain img{
    height: 65%;
    width: 25%;
}

.Mainpto{
    height: 55vh;
    width: 75vw;
    flex: 1 1 auto;
    /*允许拉伸*/

}

</style>